@{
    ViewData["Title"] = "联系我们";
}

<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center">
                <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 60px;">
                    <i class="fas fa-envelope text-success" style="font-size: 2rem;"></i>
                </div>
                <div>
                    <h2 class="mb-1 fw-bold">联系我们</h2>
                    <p class="mb-0 text-muted">获取技术支持、提交反馈或了解更多信息</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 联系表单 -->
        <div class="col-lg-8">
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-paper-plane text-primary me-2"></i>发送消息
                    </h5>
                </div>
                <div class="card-body">
                    <form id="contactForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="contactName" class="form-label">姓名 *</label>
                                <input type="text" class="form-control" id="contactName" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="contactEmail" class="form-label">邮箱 *</label>
                                <input type="email" class="form-control" id="contactEmail" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="contactPhone" class="form-label">电话</label>
                                <input type="tel" class="form-control" id="contactPhone">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="contactCompany" class="form-label">公司</label>
                                <input type="text" class="form-control" id="contactCompany">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="contactSubject" class="form-label">主题 *</label>
                            <select class="form-select" id="contactSubject" required>
                                <option value="">请选择主题</option>
                                <option value="技术支持">技术支持</option>
                                <option value="功能建议">功能建议</option>
                                <option value="问题反馈">问题反馈</option>
                                <option value="商务合作">商务合作</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="contactMessage" class="form-label">消息内容 *</label>
                            <textarea class="form-control" id="contactMessage" rows="6" required 
                                      placeholder="请详细描述您的问题或建议..."></textarea>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="contactNewsletter">
                                <label class="form-check-label" for="contactNewsletter">
                                    订阅我们的技术更新和产品资讯
                                </label>
                            </div>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-paper-plane me-2"></i>发送消息
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 常见问题 -->
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-question-circle text-info me-2"></i>常见问题
                    </h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item border-0 mb-2">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    <i class="fas fa-cog text-primary me-2"></i>如何开始使用智能客服系统？
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    访问系统首页，点击"开始对话"按钮即可开始与AI助手交互。系统会自动为您分配会话ID，您可以随时查看对话历史。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 mb-2">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    <i class="fas fa-database text-success me-2"></i>如何管理知识库？
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    在知识库管理页面，您可以初始化知识库、添加新文档、设置分类标签。系统支持多种文档格式，并会自动建立语义索引。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 mb-2">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    <i class="fas fa-shield-alt text-warning me-2"></i>系统安全性如何保障？
                                </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    系统采用多层安全防护，包括HTTPS加密传输、API密钥认证、用户会话管理、操作日志记录等，确保数据安全和系统稳定。
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 mb-2">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    <i class="fas fa-chart-line text-info me-2"></i>支持哪些MES系统集成？
                                </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    系统采用标准REST API接口，可以集成各种主流的MES系统，包括SAP MES、西门子SIMATIC IT、罗克韦尔FactoryTalk等。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 联系信息 -->
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-address-card text-primary me-2"></i>联系信息
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-envelope text-primary"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold">邮箱</h6>
                            <p class="mb-0 text-muted">support@intellicust.com</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-phone text-success"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold">电话</h6>
                            <p class="mb-0 text-muted">+86 400-888-8888</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-map-marker-alt text-info"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold">地址</h6>
                            <p class="mb-0 text-muted">北京市朝阳区科技园区</p>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                            <i class="fas fa-clock text-warning"></i>
                        </div>
                        <div>
                            <h6 class="mb-1 fw-bold">工作时间</h6>
                            <p class="mb-0 text-muted">周一至周五 9:00-18:00</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 技术支持 -->
            <div class="card border-0 shadow mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-headset text-success me-2"></i>技术支持
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="fw-bold mb-2">在线支持</h6>
                        <a href="@Url.Action("Index", "Chat")" class="btn btn-outline-primary btn-sm w-100 mb-2">
                            <i class="fas fa-comments me-1"></i>智能客服
                        </a>
                        <a href="#" class="btn btn-outline-success btn-sm w-100">
                            <i class="fas fa-video me-1"></i>视频会议
                        </a>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="fw-bold mb-2">文档资源</h6>
                        <a href="#" class="btn btn-outline-info btn-sm w-100 mb-2">
                            <i class="fas fa-book me-1"></i>用户手册
                        </a>
                        <a href="#" class="btn btn-outline-warning btn-sm w-100">
                            <i class="fas fa-download me-1"></i>API文档
                        </a>
                    </div>
                    
                    <div>
                        <h6 class="fw-bold mb-2">紧急联系</h6>
                        <p class="text-muted small mb-2">7x24小时技术支持热线</p>
                        <a href="tel:+86-400-888-8888" class="btn btn-danger btn-sm w-100">
                            <i class="fas fa-phone me-1"></i>紧急热线
                        </a>
                    </div>
                </div>
            </div>

            <!-- 社交媒体 -->
            <div class="card border-0 shadow">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-share-alt text-warning me-2"></i>关注我们
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="#" class="btn btn-outline-primary btn-sm">
                            <i class="fab fa-weixin me-2"></i>微信公众号
                        </a>
                        <a href="#" class="btn btn-outline-info btn-sm">
                            <i class="fab fa-weibo me-2"></i>官方微博
                        </a>
                        <a href="#" class="btn btn-outline-dark btn-sm">
                            <i class="fab fa-github me-2"></i>GitHub
                        </a>
                        <a href="#" class="btn btn-outline-danger btn-sm">
                            <i class="fab fa-youtube me-2"></i>YouTube
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            $('#contactForm').submit(function(e) {
                e.preventDefault();
                submitContactForm();
            });
        });

        function submitContactForm() {
            const formData = {
                name: $('#contactName').val(),
                email: $('#contactEmail').val(),
                phone: $('#contactPhone').val(),
                company: $('#contactCompany').val(),
                subject: $('#contactSubject').val(),
                message: $('#contactMessage').val(),
                newsletter: $('#contactNewsletter').is(':checked')
            };

            const button = $('#contactForm button[type="submit"]');
            const originalText = button.html();
            
            button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>发送中...');
            
            // 模拟表单提交
            setTimeout(function() {
                showAlert('success', '消息发送成功！我们会尽快回复您。');
                $('#contactForm')[0].reset();
                button.prop('disabled', false).html(originalText);
            }, 2000);
        }

        function showAlert(type, message) {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            
            $('.container-fluid').prepend(alertHtml);
            
            setTimeout(function() {
                $('.alert').fadeOut();
            }, 5000);
        }
    </script>
}

<style>
.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.bg-primary {
    background-color: #667eea !important;
}

.btn-primary {
    background-color: #667eea;
    border-color: #667eea;
}

.btn-primary:hover {
    background-color: #5a6fd8;
    border-color: #5a6fd8;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #495057;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0,0,0,.125);
}

.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.form-control:focus,
.form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
</style> 